import React, { useState, useEffect } from 'react';
import { Outlet, history, useLocation, useAppData } from '@umijs/max';
import { NavBar, TabBar } from 'antd-mobile';
import {
  AppOutline,
  MessageOutline,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons';
import './index.less';
import { useMemo } from 'react';
import { MenuOutlined, ArrowLeftOutlined } from '@ant-design/icons';
import { Drawer } from 'antd';

/* 
menulist 中的表示主路由菜单上左上角是打开 drawer 否则为返回上一页


*/

const menulist = ['/home'];

function BasicLayout() {
  const setRouteActive = (value) => {
    history.push(value);
  };
  const tabs = [
    {
      key: '/home',
      title: '首页',
      icon: <AppOutline />,
    },
    {
      key: '/todo',
      title: '待办',
      icon: <UnorderedListOutline />,
    },
    {
      key: '/message',
      title: '消息',
      icon: <MessageOutline />,
    },
    {
      key: '/me',
      title: '我的',
      icon: <UserOutline />,
    },
  ];
  const location = useLocation();
  const { pathname } = location;

  const { routes } = useAppData();

  const currouter = useMemo(() => {
    let allroutes = Object.values(routes).filter((it, i) => {
      return it.path === pathname;
    })?.[0];
    return allroutes;
  }, [pathname]);

  const [drawer, setdrawer] = useState({ open: false });

  return (
    <div className="container">
      <Drawer
        onClose={() => {
          setdrawer((s) => ({
            ...s,
            open: false,
          }));
        }}
        closable={false}
        {...drawer}
        width={'80%'}
        placement="left"
      ></Drawer>
      <div className="top">
        <NavBar
          backArrow={
            menulist.includes(pathname) ? (
              <MenuOutlined />
            ) : (
              <ArrowLeftOutlined />
            )
          }
          onBack={() => {
            if (menulist.includes(pathname)) {
              setdrawer((s) => ({
                ...s,
                open: true,
              }));
            } else {
              history.go(-1);
            }
          }}
        >
          {currouter?.name}
        </NavBar>
      </div>
      <div style={{ height: 45 }}></div>

      <Outlet></Outlet>
      <div style={{ height: 66 }}></div>
      <div className="bottom">
        <TabBar
          activeKey={pathname}
          onChange={(value) => setRouteActive(value)}
        >
          {tabs.map((item) => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
      </div>
    </div>
  );
}

export default BasicLayout;
